<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="1300px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-card header="表单配置">
      <el-form ref="formEdit" label-width="200px">
        <el-form-item label="归档表单">
          <formInput v-model="formId" placeholder="选择表单" prt-form-classify="02" :form-type="[1,2]" />
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin-top: 10px;">
        <el-button type="primary" @click="saveForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-card>
    <el-card v-if="curFormId.length > 0 && appFormId" style="margin-top: 10px;">
      <div slot="header">
        <span>数据传递</span>
      </div>
      <w-table
        :data="rows"
        :columns="columns"
        :is-paging="false"
        :is-show-no="true"
      >
        <template slot="colId" slot-scope="e">
          <formColChiose v-model="e.row.ColId" :cur-form-id.sync="e.row.FormId" :form-id="appFormId" />
        </template>
        <template slot="keywords" slot-scope="e">
          <el-input v-model="e.row.Keywords" placeholder="筛选方案名" clearable />
        </template>
        <template slot="action" slot-scope="e">
          <el-button icon="el-icon-delete" size="mini" type="danger" circle @click="remove(e.row)" />
        </template>
      </w-table>
      <div v-if="readonly == false" style="text-align: center;margin-top: 10px;">
        <el-button type="primary" @click="saveRelation">保存</el-button>
        <el-button @click="load">重置</el-button>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
import { GetFormId } from '@/flow/api/flow'
import * as appApi from '@/flow/api/flowApp'
import formInput from '@/customForm/components/form/formInput.vue'
import * as relationApi from '@/flow/api/flowAppFormRelation'
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import { GetStructures } from '@/customForm/api/form'

export default {
  components: {
    formInput,
    formColChiose
  },
  props: {
    appId: {
      type: String,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rows: [],
      formId: null,
      curFormId: [],
      sourFormId: null,
      toForm: null,
      id: 1,
      appFormId: null,
      title: null,
      columns: [{
        key: 'ColId',
        title: '来源表单字段',
        align: 'center',
        slotName: 'colId'
      }, {
        key: 'toLabel',
        title: '对应表单字段',
        align: 'left'
      }, {
        key: 'Keywords',
        title: '筛选方案名',
        align: 'center',
        slotName: 'keywords',
        width: 140
      }]
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    async saveForm() {
      const res = await appApi.SetSettleForm(this.appId, this.formId)
      this.$message({
        message: '保存成功!',
        type: 'success'
      })
      if (res) {
        this.sourFormId = this.formId
        this.curFormId = [this.formId]
        this.loadToForm()
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
    },
    resetForm() {
      this.formId = this.sourFormId
    },
    remove(row) {
      const index = this.rows.findIndex(a => a.id === row.id)
      if (index !== -1) {
        this.rows.splice(index, 1)
      }
    },
    async saveRelation() {
      const list = this.rows.filter(c => c.ColId != null)
      await relationApi.Sync(this.appId, list.map(c => {
        return {
          ColId: c.ColId,
          FormId: c.FormId,
          ToColId: c.ToColId,
          Keywords: c.Keywords
        }
      }))
      this.$message({
        message: '保存成功!',
        type: 'success'
      })
    },
    async reset() {
      const app = await appApi.Get(this.appId)
      this.formId = app.SettleFormId
      this.curFormId = this.formId ? [this.formId] : []
      this.sourFormId = app.SettleFormId
      this.title = '应用' + app.AppName + '归档表单配置'
      if (app.FlowId) {
        this.loadFormId(app.FlowId)
      } else {
        this.appFormId = null
      }
      if (app.SettleFormId) {
        this.loadToForm()
      } else {
        this.rows = []
        this.id = 1
      }
    },
    async loadToForm() {
      const res = await GetStructures({
        FormId: this.curFormId,
        ShowMode: [0],
        IsSystem: false
      })
      this.toForm = res
      this.load()
    },
    loadCols(to, powers, list, label, formId) {
      if (to.Type === 4) {
        formId = to.Id
      }
      if (to.Children != null && to.Children.length > 0) {
        if (label == null) {
          label = to.Label
        } else {
          label = label + '/' + to.Label
        }
        to.Children.forEach(c => {
          this.loadCols(c, powers, list, label, formId)
        })
      } else if (to.Type === 2) {
        const t = powers.find(a => a.ToColId === to.Id)
        const data = {
          ColId: null,
          FormId: formId,
          ToColId: to.Id,
          toLabel: label + '/' + to.Label,
          Keywords: null
        }
        if (t != null) {
          data.ColId = t.ColId
          data.Keywords = t.Keywords
        }
        list.push(data)
      }
    },
    async loadFormId(flowId) {
      this.appFormId = await GetFormId(flowId)
    },
    async load() {
      let res = await relationApi.Gets(this.appId)
      const list = []
      if (res == null) {
        res = []
      }
      this.toForm.forEach(c => {
        this.loadCols(c, res, list, null, null)
      })
      this.rows = list
    }
  }
}
</script>

